<template>
 <div class="order" v-if="orderInfo.address">
    <Head :title="title"></Head>
    <!-- 地址栏 -->
    <div class="address" @click="goAddress">
      <div class="default" v-if="orderInfo.address.is_default==1">默认</div>
      <div class="detail">
        <p class="detailadress">
          {{ orderInfo.address.address }} {{ orderInfo.address.address_detail }}
        </p>
        <p class="message">
          {{ orderInfo.address.name }} {{ orderInfo.address.mobile }}
        </p>
      </div>
      <van-icon name="arrow" style="position: absoule; left: 300px; top: 50%" />
    </div>
    <!-- 商品栏 -->

    <div v-for="item in orderInfo.goodsList" :key="item.id" class="goodsList">
      <van-card
        :num="item.number"
        :price="item.retail_price"
        :title="item.goods_name"
        :thumb="item.list_pic_url"
      />
      </div>
    <div class="goodstotal">
      <div class="list">
        <div>
          商品合计<span>￥{{ orderInfo.allPrise }}</span>
        </div>
        <div class="border">运费 <span>免运费</span></div>
        <div>优惠券 <span>暂无</span></div>
      </div>
    </div>
    <!-- 实付款固定底部 -->
    <div class="fixBox">
      <div class="fact">
        实付: <span>￥{{ orderInfo.allPrise }}</span>
      </div>
      <div class="pay">支付</div>
    </div>
  </div>
</template>

<script setup>
import Head from '@/components/title.vue'
import { ref } from 'vue'
import { detailAction } from '@/api/cart/order'
import { useRouter } from 'vue-router'
const router = useRouter()
const title = ref('确认订单')
const orderInfo = ref([])
const goAddress = () => {
  router.push({ name: 'addressView' })
}
detailAction({
  openId: localStorage.getItem('openId'),
  addressId: ''
}).then((res) => {
  const address = localStorage.getItem('addressInfo')
  if (address) {
    res.address = JSON.parse(address)
  }
  console.log(res)
  orderInfo.value = res
})
</script>
<script>
export default {
  name: 'orderView'
}
</script>

<style lang="scss" scoped>
.order {
  background-color: #f0f0f0;
  height: 2000px;
  .address {
    background-color: #fff;
    width: 710px;
    height: 206px;
    margin: 30.5px auto 25.5px;
    position: relative;
    .default {
      width: 100px;
      height: 40px;
      border: 1px solid rgba(158, 66, 66, 1);
      border-radius: 4px;
      text-align: center;
      line-height: 40px;
      color: rgba(158, 66, 66, 1);
      font-size: 20px;
      position: absolute;
      left: 26px;
      top: 58px;
    }
    .detail {
      position: absolute;
      top: 57.5px;
      left: 161px;
      .detailadress {
        font-size: 28px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 600;
      }
      .message {
        font-size: 24px;
        color: #999999;
        letter-spacing: 0;
        font-weight: 400;
        margin-top: 14px;
      }
    }
  }
  .goodsList {
    width: 710px;
    height: 253px;
    margin: 0 auto;
  }
  .goodstotal {
    width: 710px;
    height: 261px;
    margin: 0 auto;
    background-color: #fff;
    .list {
      width: 665px;
      margin: 0 auto;
      height: 261px;
      position: relative;
      div {
        height: 87px;
        line-height: 87px;
        font-size: 24px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;

        span {
          font-size: 26px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 500;
          position: absolute;
          right: 0;
        }
      }
      .border {
        border-top: 1px solid rgba(214, 214, 214, 1);
        border-bottom: 1px solid rgba(214, 214, 214, 1);
      }
    }
  }
  .fixBox {
    width: 100%;
    height: 132px;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .fact {
      font-size: 26px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;
      span {
        font-size: 28px;
        color: #9e4242;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
    .pay {
      width: 193px;
      height: 72px;
      background: #cea62a;
      border-radius: 35.75px;
      text-align: center;
      line-height: 72px;
      font-size: 28px;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 400;
      margin: 0px 20px 0px 41px;
    }
  }
}
</style>
